<template>
  <div class="app-container">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="130px"
    >
      <el-form-item label="油站名称" prop="deptName" v-show="false">
        <el-input v-model="ruleForm.deptName" placeholder="请输入油站名称" />
      </el-form-item>
      <el-form-item label="首页轮播图" prop="payMode">
        <el-upload
          class="avatar-uploader"
          :class="[ruleForm.imgFileList.length <= 3 ? '' : 'uploader-hidden']"
          :action="addressUrl"
          :headers="headers"
          multiple
          list-type="picture-card"
          :limit="5"
          :file-list="ruleForm.imgFileList"
          accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
          :before-upload="beforeAvatarUpload"
          :on-remove="handleRemove"
          :on-success="handlepaymentSuccess"
          :auto-upload="true"
        >
          <i class="el-icon-plus"></i>
          <div class="el-upload__tip" slot="tip">
            只能上传图片文件，单张图片大小不能超过 2MB
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="公告信息" prop="notice">
        <textarea
          cols="40"
          rows="3"
          v-model="ruleForm.notice"
          placeholder="请输入公告信息"
        ></textarea>
      </el-form-item>
      <el-form-item label="班结是否打印">
        <el-radio-group v-model="ruleForm.wsPrintFlag">
          <el-radio label="1">打印</el-radio>
          <el-radio label="2">不打印</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="小票打印模板">
        <el-radio-group v-model="ruleForm.printSetting">
          <el-radio label="1">客户联</el-radio>
          <el-radio label="2">商户联</el-radio>
          <el-radio label="3">客户联和商户联</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="兑换积分小票打印">
        <el-radio-group v-model="ruleForm.integralPrintFlag">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { addPay, updatePay, getStationPay } from "@/api/station/pay";
export default {
  name: "applet",
  data() {
    return {
      // 遮罩层
      integralPrintFlagOptions: [],
      deleteImgFileList: [], //存已被删除了的图片的id
      dialogImageUrl: "",
      dialogVisible: false,
      ruleForm: {
        imgFileList: [],
      },
      // 表单校验
      rules: {},
      headers: { Authorization: "Bearer " + getToken() },
      // addressUrl:  location.protocol +"//" +*.host +process.env.VUE_APP_BASE_API + "/common/upload",
      addressUrl:  process.env.VUE_APP_BASE_API + "/common/upload",
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    handleRemove(file, fileList) {
      this.ruleForm.imgFileList = fileList;
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 2;
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt5M;
    },
    //上传成功
    handlepaymentSuccess(response, file, fileList) {
      this.ruleForm.imgFileList = [
        ...this.ruleForm.imgFileList,
        {
          name: file.name,
          url:  response.url,
        },
      ];
    },
    /** 进入信息 */
    getInfo() {
      getStationPay().then((response) => {
        const imgFileList = response.data.imgFileList
        response.data.imgFileList = [];
        this.ruleForm = response.data;
        setTimeout(() =>{
          this.ruleForm = {...response.data, imgFileList}
        }, 1000)
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.ruleForm.deptId != null) {
            updatePay(this.ruleForm).then((response) => {
              this.msgSuccess("修改配置成功");
              this.getInfo();
            });
          } else {
            addPay(this.ruleForm).then((response) => {
              this.msgSuccess("添加配置成功");
              this.getInfo();
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss">
.uploader-hidden {
  .el-upload--picture-card {
    display: none;
  }
}
</style>